<template>
  <div class="edu-page-warp parcticeLink">
      <condition-card class="queryClass" @reset="reset" @search="searchList" label-width="110px" label-position="right">  
        <el-row class="binrow">
            <el-col :span="16">
                <div class="float-left">
                    实践环节学时预警：当前有{{
                        totalCount
                    }}位大三学生实践环节不满足学时要求！
                </div>
            </el-col>
            <el-col :span="8">
                <el-button class="float-right" @click="btnDialog">查看名单</el-button>
            </el-col>
      </el-row>      
        <el-row >
          <el-col :span="8">
            <el-form-item :label="$t('administrationClass.grade')">
              <el-date-picker class="search-item" :clearable="false" v-model="queryForm.condition.grade" @change="handleGradeChange" value-format="yyyy" type="year" :placeholder="$t('graduationDesign.pleaseChoose')" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('administrationClass.college')">
              <el-select v-model="queryForm.condition.college" @change="collegeChange" clearable filterable style="width:100%">
                <el-option v-for="item in options.college" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('administrationClass.major')">
              <el-select v-model="queryForm.condition.major" clearable filterable style="width:100%">
                <el-option v-for="item in options.major" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="板块" :rules="[
                  { required: true, message: $t('message.inputRequired'), trigger: 'blur' }
                ]">
              <el-select v-model="queryForm.condition.plateId" clearable filterable style="width:100%">
                <el-option v-for="item in plateIdList" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目性质" prop="nature">
              <el-select v-model="queryForm.condition.nature" style="width:100%" placeholder="请选择">
                <el-option v-for="item in optionsArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="录入学时">
              <el-col :span="11">
                <el-form-item prop="min">
                  <el-input v-model="queryForm.condition.min" type="number" min=0 onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="max">
                  <el-input v-model="queryForm.condition.max" type="number" min=0 onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card shadow="never">
        <div class="edu-page-title seachlaseach clearfix">
          <span class="fl">实践环节申报情况查询</span>
          <span class="seachenter fr">*实践环节要求在3学年完成{{parseFloat(ruleForm.necessaryHour)+parseFloat(ruleForm.electiveHour)?parseFloat(ruleForm.necessaryHour)+parseFloat(ruleForm.electiveHour):0}}学时,包括{{ruleForm.necessaryHour?ruleForm.necessaryHour:0}}学时必修和{{ruleForm.electiveHour?ruleForm.electiveHour:0}}学时选修</span>
        </div>
        <div class="edu-opertion-bar">
          <div class="float-left">
            <KeywordInput v-model="queryForm.condition.studentName" @enter="searchList" placeholder="请输入学号或姓名搜索"></KeywordInput>
          </div>
          <div class="float-right">
            <el-button @click="onExport">{{$t('message.export')}}</el-button>
          </div>
        </div>
        <el-table :order="false" :selection="true" @selection-change="handleSelectionChange" :data="labourList">
          <el-table-column type="selection" min-width="50"></el-table-column>
          <el-table-column :label="$t('examinInquiry.studentNumber')" prop="studentId" min-width="80" />
          <el-table-column :label="$t('examinInquiry.fullName')" prop="studentName" min-width="80" />
          <el-table-column :label="$t('examinInquiry.grade')" prop="grade" min-width="70" />
          <el-table-column :label="$t('examinInquiry.college')" prop="collegeI18n" min-width="160" show-overflow-tooltip />
          <el-table-column :label="$t('examinInquiry.major')" prop="majorI18n" :render-header="labelHead" show-overflow-tooltip min-width="160" />
          <el-table-column label="板块" prop="plateName" :render-header="labelHead" show-overflow-tooltip min-width="160">
          </el-table-column>
          <el-table-column label="项目性质" prop="nature" :render-header="labelHead" min-width="80">
            <template slot-scope="scope">
              {{scope.row.nature | filterNature}}
            </template>
          </el-table-column>
          <el-table-column label="录入学时" prop="hour" min-width="80" />
          <el-table-column label="参与次数" prop="count" min-width="80" />
          <el-table-column label="认定学时" prop="necessaryHour" min-width="80" />
          <el-table-column :label="$t('message.operating')" fixed="right" min-width="100">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click.stop="handleClick(scope.row)" size="mini">查看明细</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="edu-pagination">
          <div class="float-right">
            <el-pagination :current-page="pageNum_" :page-sizes="[10,20, 50, 100, 500, 1000]" :page-size="pageSize_" :total="total_" layout="total, sizes, prev, pager, next, jumper" style="float: right;margin:10px 60px 0 0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-card>
      <!-- 弹框 -->
      <el-dialog :title="dialogTitle" width="60%" :visible.sync="updateDialog" :auto-height="true" class="practceDialog">
        <el-table :data="labourList2">
          <el-table-column label="学年学期" min-width="130" show-overflow-tooltip :render-header="labelHead">
            <template slot-scope="scope">
              {{scope.row.grade+'-'}}{{parseFloat(scope.row.grade)+1+'学年第'+scope.row.term+'学期' }}
            </template>
          </el-table-column>
          <el-table-column label="项目名称" prop="name" :render-header="labelHead" min-width="120" show-overflow-tooltip />
          <el-table-column label="录入学时" prop="hour" min-widt="50" />
          <el-table-column label="活动日期" prop="activityDate" :render-header="labelHead" min-width="80" />
          <el-table-column label="最后修改时间" prop="lastModifyDate" :render-header="labelHead" show-overflow-tooltip min-width="130" />
        </el-table>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="updateDialog = false">取 消</el-button> -->
          <el-button type="primary" @click="updateDialog = false">关 闭</el-button>
        </span>
        <!-- <div class="edu-pagination">
          <div class="float-right">
            <el-pagination :current-page="pageNum_" :page-sizes="[10,20, 50, 100, 500, 1000]" :page-size="pageSize_" :total="total_" layout="total, sizes, prev, pager, next, jumper" style="float: right;margin:10px 60px 0 0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div> -->
      </el-dialog>

      <!-- 预警查看名单 -->
      <edu-dialog ref="warningDialog" title="查看名单" width="80%" class="earlywarning">
          <earlywarning ref="child" :plate-id="7" />
      </edu-dialog>
  </div>
</template>
<script>
import earlywarning from './component/earlywarning'
import api from 'common/src/api/score/bachelor/labourCourse';
import { queryDic } from "common/src/api/dictionary";
import { exportData } from 'common/src/api/underGraduationDesign/changeAudit'
import tools from 'common/src/views/underGraduationDesign/tools.js';
import UTILS from "common/src/utils/utils";
import dayjs from 'dayjs'
import mixin from 'common/src/mixins/index';

// 院聘导师库
export default {
  name: "",
  mixins: [mixin],
  components: {
    earlywarning
  },
  computed: {
  },
  mounted() {
    this.Scorelist();
    this.LaborEducationList();
    this.getOptions();//学院
    this.lifeSkill();
  },
  data() {
    return {
      updateDialog: false,
      dialogTitle: '学号+姓名+板块+学时明细',
      multipleSelection: [],
      labourList: [],
      labourList2: [],
      rows: null,
      mulArr: [],
      totalCount:'',
      newCollegeCount:'',
      queryForm: {
        pageNum_: 1,
        pageSize_: 10,
        condition: {
          grade: String(new Date().getFullYear()), // 年级
          college: '', // 学院
          major: '', // 专业
          min: null,
          max: null,
          page: true,
          studentName: '',
          plateId: '',
          nature: ''
        }
      },
      ruleForm: {
        necessaryHour: '',
        electiveHour: ''
      },
      optionsArr: [{
        value: '1',
        label: '必修'
      }, {
        value: '2',
        label: '选修'
      }],
      options: {
        college: [],
        major: []
      },
      plateIdList: [
        {
          id: 2,
          label: '劳动习惯养成学时管理'
        },
        {
          id: 3,
          label: '社会实践锻炼学时管理'
        },
        {
          id: 4,
          label: '公益志愿服务学时管理'
        },
        {
          id: 5,
          label: '创新创业提升学时管理'
        },
        {
          id: 6,
          label: '学校主题教育学时管理'
        },
        {
          id: 7,
          label: '学院特色实践学时管理'
        },
        {
          id: 8,
          label: '生活技能培养学时管理'
        }
      ],
    };
  },
  filters: {
    filterNature: function (val) {
      if (val == 1) {
        return '必修'
      } else if (val == 2) {
        return '选修'
      }
    },
    filterLPlate: function (val) {
      if (val == 2) {
        return '劳动习惯养成学时管理'
      } else if (val == 3) {
        return '社会实践锻炼学时管理'
      } else if (val == 4) {
        return '公益志愿服务学时管理'
      } else if (val == 5) {
        return '创新创业提升学时管理'
      } else if (val == 6) {
        return '学校主题教育学时管理'
      } else if (val == 7) {
        return '学院特色实践学时管理'
      } else if (val == 8) {
        return '生活技能培养学时管理'
      }
    }
  },
  watch: {
  },
  methods: {
    lifeSkill(){
      api.collegeCharacwarning().then(res => {
        if (res.code === 200) {
          this.totalCount=res.data.totalCount;
          this.newCollegeCount=res.data.newCollegeCount;
        }
      });
    },
    searchList() {
      if (parseFloat(this.queryForm.condition.min) > parseFloat(this.queryForm.condition.max)) {
        this.$message('录入学时最小数不可大于最大数');
        return
      }
      this.Scorelist();
    },
    // 筛选条件字典查询
    Scorelist() {
      api.groupQuerylist(this.queryForm).then(res => {
        if (res.code === 200) {
          res.data.list.forEach( item =>{
            let recordHour = parseFloat(item.hour);
            let realHour =parseFloat(item.necessaryHour)
            if(recordHour<realHour){
              item.necessaryHour=item.hour;
            }
            item.necessaryHour=Number(item.necessaryHour);
          });
          this.labourList = res.data.list;
          this.total_ = res.data.total_;
        }
      });
    },
    // 重置筛选框
    reset() {
      this.queryForm = {
        pageNum_: 1,
        pageSize_: 10,
        condition: {
          grade: String(new Date().getFullYear()), // 年级
          college: '', // 学院
          major: '', // 专业
          min: null,
          max: null,
          page: true,
          studentName: '',
          plateId: '',
          nature: ''
        }
      }
      this.searchList()
      //清空专业
      this.options.major=[]
      this.queryForm.condition.major=null
    },
    //查看
    handleClick(row) {
      this.labourList2 = [];//清除缓存
      this.rows = row;
      this.dialogTitle = row.studentId + row.studentName + ' ' + row.plateName + '学时明细';
      api.groupQuerylistTwo(row).then(res => {
        if (res.code === 200) {
          this.labourList2 = res.data;
          this.labourList2.forEach((item, index) => {
            if (item.lastModifyDate) {
              // var tNum=item.lastModifyDate.indexOf('.');
              if (item.lastModifyDate.split('.')[0]) {
                item.lastModifyDate = item.lastModifyDate.split('.')[0];
              }
            }
          })
        }
      });
      this.updateDialog = true;
    },
    LaborEducationList() {
      api.LaborEducation().then(res => {
        if (res.code === 200) {
          this.LaEducaDate = res.data.filter(item => item.id != 1);//板块
          var numTotal = 0;
          this.LaEducaDate.forEach((item, index) => {
            if (item.nature != 1) {
              numTotal += item.electiveHour;
            }
          })
          this.codeList = res.data.filter(item => item.id == 1);//课程代码
          if (this.codeList[0]) {
            this.ruleForm = this.codeList[0];
          }
        }
      });
    },
    handleGradeChange() {
      this.options.major=[];
      this.queryForm.condition.major=null;
      if(this.queryForm.condition.college){
        this.collegeChange(this.queryForm.condition.college);
      }
    },
    // 筛选条件字典查询--学院
    getOptions() {
      if(this.global.isAnyTeacher){
          this.options.college.push({
              label:this.global.currentUser.facultyName,
              value:this.global.currentUser.faculty,
          })
          return
      }      
      let data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['X_YX']
      }
      queryDic(data).then(res => {
          UTILS.fillSelect({ college: 'X_YX' }, res.data, this.options)
          if(this.global.isAcdemicDean){
              if(this.global.currentUser.manageFaculty !== null && this.global.currentUser.manageFaculty !==''){
                  let manageFaculty = this.global.currentUser.manageFaculty.split(',')
                  this.options.college=this.options.college.filter(item=>manageFaculty.includes(item.value))
              }else{
                  this.options.college=[{label:this.global.currentUser.facultyName,value:this.global.currentUser.faculty}]
              }
          }
      })
    },
    // 修改学院
    collegeChange(val) {
      this.options.major = []
      this.queryForm.condition.major = ''
      let data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['G_ZY'],
        filter: {
          grade: this.queryForm.condition.grade,
          prefix: [val],
          specilaCode: 'XY2ZY',
          facultys: [val]
        }
      }
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            major: 'G_ZY' // 专业
          },
          res.data,
          this.options
        )
      })
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      var arrs = [];
      this.multipleSelection.map(item => {
        arrs.push(item.id);
      });
      this.mulArr = [...new Set(arrs)]
    },
    // 分页
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.searchList(this.queryForm)
    },
    // 分页
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.queryForm.pageNum_ = 1
      this.searchList(this.queryForm)
    },
    // 导出
    onExport() {
      let data = _.cloneDeep(this.queryForm.condition);
      api.exportLabourPractice(data).then(res => {
        if (res.code == 200) {
          tools.downloadFile(res.data.key, "汇总查询导出.xls", null, this);
        }
      })
    },
    btnDialog() {
      this.$refs.warningDialog.open()
      this.$nextTick(() => {
          this.$refs.child.queryForm.pageNum_ = 1
          this.$refs.child.queryForm.pageSize_ = 10 
          this.$refs.child.init()
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.clearfix {
    display: block;
    clear: both;
    content: '';
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.edu-page-title {
    margin-bottom: 30px;
}
.line {
    text-align: center;
}
.el-dialog .el-dialog__header {
    border-bottom: none !important;
}
.seachlaseach .seachenter {
    font-size: 12px;
}
.parcticeLink .el-dialog__title {
    font-size: 16px !important;
}
.parcticeLink .el-dialog__header {
    border-bottom: none !important;
}
.parcticeLink .el-dialog__body {
    padding: 10px 20px !important;
}
.parcticeLink .el-dialog__footer {
    border-top: none !important;
}
.binrow {
    width: 100%;
    padding: 30px 24px 0 34px;
    box-sizing: border-box;
    color: red;
    position: absolute;
    left: 0;
    top: 0;
}
.queryClass ::v-deep .el-card__body {
    padding-top: 60px !important;
    position: relative;
}
</style>

